<template>
    <view class="register-container">
        <view class="logo-wrapper">
            <image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.cFjj4wn0ybaDdyBe1gnRDQHaHc?rs=1&pid=ImgDetMain"></image>
        </view>
        <u-form :model="formData" ref="uForm" :labelWidth="labelWidth">
            <u-form-item label="用户名" prop="username">
                <u-input v-model="formData.username" placeholder="请输入用户名"></u-input>
            </u-form-item>
            <u-form-item label="密码" prop="password">
                <u-input v-model="formData.password" placeholder="请输入密码" password></u-input>
            </u-form-item>
            <u-form-item label="确认密码" prop="confirmPassword">
                <u-input v-model="formData.confirmPassword" placeholder="请再次输入密码" password></u-input>
            </u-form-item>
        </u-form>
        <u-button @click="register" type="primary" size="large" shape="circle">注册</u-button>
        <view class="links-wrapper">
            <text @click="goBack">已有账号，去登录</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                username: '',
                password: '',
                confirmPassword: '',
            },
            labelWidth: '80px'
        };
    },
    methods: {
        register() {
            console.log('注册数据:', this.formData);
            // 假设注册成功后跳转到登录页，使用 uni.redirectTo 关闭当前页面并打开登录页
			this.$store.dispatch("user/handleRegister", this.formData).then(res=>{
				uni.redirectTo({
				    url: '/pages/Login/Login'
				});
			})
            
        },
        goBack() {
            // 返回登录页面
            uni.navigateBack({
                delta: 1
            });
        }
    }
};
</script>

<style lang="scss" scoped>
$primary-color: #3d98fc;
$text-color: #333;
$bg-color: #f5f5f5;
$input-bg-color: #fff;
$input-border-color: #bbb;
$input-border-width: 2px;
$input-bottom-border-color: #999;
$input-bottom-border-width: 3px;
$label-width: 80px;

.register-container {
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $bg-color;
    min-height: 100vh;

    .logo-wrapper {
        width: 200px;
        height: 200px;
        margin-bottom: 50px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
		
		image {
			height: 100%;
			width: 100%;
			object-fit: contain;
		}
    }

    .u-form {
        width: 100%;
        max-width: 400px;

        .u-form-item {
            margin-bottom: 20px;
            input {
                border: $input-border-width solid $input-border-color;
                border-bottom: $input-bottom-border-width solid $input-bottom-border-color;
                border-radius: 8px;
                padding: 12px 15px;
                font-size: 16px;
                color: $text-color;
                background-color: $input-bg-color;
                transition: border-color 0.3s ease;

                &:focus {
                    border-color: $primary-color;
                    border-bottom-color: $primary-color;
                }
            }
        }
    }

    .u-button {
        width: 100%;
        max-width: 400px;
        margin-top: 30px;
        font-size: 18px;
        letter-spacing: 1px;
        transition: all 0.3s ease;

        &:hover {
            transform: scale(1.02);
        }
    }

    .links-wrapper {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 400px;

        text {
            color: $primary-color;
            text-decoration: underline;
            cursor: pointer;
            transition: color 0.3s ease;

            &:hover {
                color: darken($primary-color, 10%);
            }
        }
    }
}
</style>